<template>
  <div class="quill">
    <div class="quill_content">
      <quill-editor
        class="editor"
        ref="myQuillEditor"
        v-model="content"
        placeholder="HELLO"
        :options="editorOption"
        @blur="onEditorBlur($event)"
        @focus="onEditorFocus($event)"
        @ready="onEditorReady($event)"
      ></quill-editor>
      <div>
        <el-row style="margin-top: 100px">
          <el-col style="height: 50px" type="flex" :span="10">
            <el-button type="primary" @click="submit"> 提交 </el-button>
          </el-col>
        </el-row>
      </div>
      <!-- Or manually control the data synchronization -->
      <!-- <quill-editor
        :content="content"
        :options="editorOption"
        @change="onEditorChange($event)"
      /> -->
    </div>
  </div>
</template>

<script>
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
// import Quill from "quill";
// import someModule from "../yourModulePath/someQuillModule.js";
// Quill.register("modules/someModule", someModule);
import { quillEditor } from "vue-quill-editor";
import { addQuillTitle } from '../assets/quill_title'
export default {
  data() {
    return {
      content: "",
      editorOption: {
        // Some Quill options...
        placeholder: "请书写你的江山...",
        readOnly:true
      },
    };
  },
  components: {
    quillEditor,
  },
  methods: {
    onEditorBlur(quill) {
      console.log("editor blur!", quill);
    },
    onEditorFocus(quill) {
      console.log("editor focus!", quill);
    },
    onEditorReady(quill) {
      console.log("editor ready!", quill);
    },
    onEditorChange({ quill, html, text }) {
      console.log("editor change!", quill, html, text);
      this.content = html;
    },
    submit(){
      this.$message({
          type:'success',
          message:'提交成功'
      })
    }
  },
  computed: {
    editor() {
      return this.$refs.myQuillEditor.quill;
    },
  },
  mounted() {
      addQuillTitle()
    console.log("this is current quill instance object", this.editor);
  },
};
</script>

<style scoped>
.quill {
  padding: 20px 10px;
  box-sizing: border-box;
  background: #f0f0f0;
  height: 100%;
}
.quill_content {
  border: 1px solid gray;
  padding: 15px;
  box-sizing: border-box;
  background: #fff;
  border-radius: 5px;
  height: 100%;
}
.editor {
  height: 300px;
}
</style>